<template>
	<vk-data-drawer
		v-model="value.show"
		:title="page.title"
		:top="page.top"
		:width="page.width"
		:show-header="false"
	>
		<view style="padding: 15px;" v-if="value.item && value.show">
			<view v-loading="page.loading" style="position: relative;height: 120px;overflow: hidden; color: #515a6e;display: flex;">
				<view style="flex: 1;display: flex;align-items: center;">
					<view style="text-align: center;margin: 0 40px;">
						<el-image :src="value.item.avatar" style="width: 80px;height: 80px;border-radius: 50%;"></el-image>
					</view>
					<view style="flex: 1;font-size: 14px;color: #8a8a8a;display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;grid-gap:20px 0px;">
						<view>用户昵称：<text style="color: #000000;">{{ value.item.nickname }}</text></view>
						<view>商家备注：<text style="color: #000000;">{{ value.item.comment }}</text></view>
						<view>用户手机：<text style="color: #000000;">{{ value.item.mobile }}</text></view>
						<view>上级昵称：<text style="color: #000000;">{{ $getData(value.item, 'inviterUserInfo.nickname', '无') }}</text></view>
						<view>注册时间：<text style="color: #000000;">{{ vk.pubfn.dateDiff(value.item.register_date,"")}}</text></view>

						<view>会员等级：<text style="color: #000000;">{{ value.item.vip_lv }}</text></view>
						<view>分销等级：<text style="color: #000000;">{{ $getData(value.item, 'fx.lv', '无') }}</text></view>
						<view>在途奖励：<text style="color: #000000;">{{ vk.pubfn.priceFilter($getData(value.item, "account_reward.wait", 0)) }}</text></view>
						<view>可提奖励：<text style="color: #000000;">{{ vk.pubfn.priceFilter($getData(value.item, "account_reward.allow", 0)) }}</text></view>
						<view>已提奖励：<text style="color: #000000;">{{ vk.pubfn.priceFilter($getData(value.item, "account_reward.success", 0)) }}</text></view>
						<view v-if="value.item.fx.role && value.item.fx.role.length > 0">
							身份：
							<el-tag size="mini" v-if="value.item.fx.role.indexOf('region')>-1">区域代理</el-tag>
							<el-tag size="mini" v-if="value.item.fx.role.indexOf('shareholder')>-1" type="danger" style="margin-left: 10px;">商城股东</el-tag>
						</view>
					</view>
				</view>

				<vk-data-icon name="el-icon-close" style="position: absolute;top:0px;right:0px" size="26" pointer @click="close()"></vk-data-icon>
			</view>
			<!-- 页面主体内容开始 -->
			<el-tabs v-model="pageName" type="card">
				<el-tab-pane :label="item.title" :name="item.name" v-for="(item, index) in tabs" :key="index"></el-tab-pane>
			</el-tabs>
			<keep-alive>
				<component :is="pageName" :user="value.item" @refresh="refresh"></component>
			</keep-alive>
			<!-- 页面主体内容结束 -->
		</view>
	</vk-data-drawer>
</template>

<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例

import userBalance from "./records/user-balance"
import userIntegral from "./records/user-integral"
import userReward from "./records/user-reward"
import userWithdrawalWay from "./records/user-withdrawal-way";
import userPerformance from "./records/user-performance"

export default {
	components: {
		userBalance,
		userIntegral,
		userReward,
		userWithdrawalWay,
		userPerformance
	},
	props: {
		value: {
			Type: Object,
			default: function() {
				return {
					show: false,
					mode: "",
					item: "",
					options: "",
					pageName:""
				};
			}
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			pageName: "user-balance",
			tabs: [
				{ title: "余额明细", name: "user-balance" },
				{ title: "积分明细", name: "user-integral" },
				{ title: "奖励明细", name: "user-reward" },
				{ title: "提现方式列表", name: "user-withdrawal-way" },
				{ title: "业绩明细", name: "user-performance" },
			],
			page: {
				title: "标题",
				top: "7vh",
				width: "85%",
				loading: false
			}
		};
	},
	mounted() {
		that = this;
		that.init();
	},
	methods: {
		// 初始化
		init() {
			let { value } = that;
			that._input(value);
		},
		_input(value) {
			that.$emit("input", value);
		},
		// 监听 - 页面打开
		onOpen() {
			that = this;
			let { value = {} } = that;
			let { item } = value;
			if (that.value.pageName) that.pageName = that.value.pageName;
			//that.form1 = vk.pubfn.copyObject(item);
		},
		// 监听 - 页面关闭
		onClose() {},
		// 打开页面
		open() {
			let { value } = that;
			value.show = true;
			that._input(value);
		},
		// 关闭页面
		close() {
			let { value } = that;
			value.show = false;
			that._input(value);
		},
		refresh(){
			vk.callFunction({
				url: 'admin/business/sys/user.getInfo',
				loading:{ that, name:"page.loading" },
				data:{
					_id: that.value.item._id
				},
				success:function(data){
					vk.pubfn.objectAssign(that.value.item, data.userInfo);
				}
			});
		}
	},
	watch: {
		"value.show": {
			handler(newValue, oldValue) {
				let that = this;
				if (newValue) {
					that.onOpen();
				} else {
					that.onClose();
				}
			}
		}
	},
	// 过滤器
	filters: {

	},
	// 计算属性
	computed: {

	}
};
</script>

<style lang="scss" scoped>

</style>
